<template>

	<view class="main">
		<view class="">
			<view class="order-no-box">
				<view class="order-no-left">
					<view class="title">订单号：</view>
					<view class="order-no">{{props.data.orderno}}</view>
				</view>
				<view class="status" v-if="props.current == 1">
					已完成
				</view>
			</view>
			<view class="name">{{props.data.Shop.name}}</view>
			<view class="more-one-box">
				<view class="left">开始时间：{{props.data.start_time}}</view>
				<view class="right">收益{{props.data.total_price}}/小时</view>
			</view>
			<view class="more-two-box">
				<view class="left">结束时间：{{props.data.end_time}}</view>
				<view class="right">服务时间：{{props.data.time}}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps({
		current: Number,
		data: Object
	})
</script>

<style lang="scss" scoped>
	.main {
		padding: 28rpx 20rpx;
		box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
		margin-bottom: 40rpx;



		.order-no-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.status {
				opacity: 1;
				/** 文本1 */
				font-size: 8px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 10.98px;
				color: rgba(67, 207, 124, 1);
			}

			.order-no-left {
				display: flex;
				align-items: center;

				.title {
					opacity: 1;
					/** 文本1 */
					font-size: 11px;
					font-weight: 900;
					letter-spacing: 0px;
					line-height: 13.72px;
					color: rgba(0, 0, 0, 1);
				}

				.order-no {
					/** 文本2 */
					font-size: 10px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: NaNpx;
					color: rgba(153, 153, 153, 1);
					text-align: left;
					vertical-align: top;
				}
			}

		}

		.name {
			opacity: 1;
			/** 文本1 */
			font-size: 12px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 16.46px;
			color: rgba(51, 51, 51, 1);
			padding: 10rpx 0 20rpx 0;
		}

		.more-one-box,
		.more-two-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				opacity: 1;
				/** 文本1 */
				font-size: 8px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 10.98px;
				color: rgba(170, 170, 170, 1);
			}
		}

		.more-two-box {
			padding-top: 10rpx;

			.right {
				opacity: 1;
				/** 文本1 */
				font-size: 8px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 10.98px;
				color: rgba(170, 170, 170, 1);
			}
		}

		.more-one-box {
			.right {
				opacity: 1;
				/** 文本1 */
				font-size: 8px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 10.98px;
				color: rgba(255, 87, 51, 1);

			}
		}


	}
</style>